
<template>
  <!-- 调用说明：-----图片预览
  <template>
  <ImagePreView :piclist="picList"  :showquerybutton="true" :height="600" @download="downLoad" @querytrue="queryTrue" / >
  </template>
  <script>
  import ImagePreView from '@/views/common/imagepreview'
  export default {

  components: {ImagePreView  },
</script>
参数说明
  picList:图片列表名
    picList: [
        { Id: 0,
          Src: 'https://www.ymion.com/files/picstore/canyin/001.jpg',//放大图片
          ThumbSrc: 'https://www.ymion.com/files/picstore/canyin/001.jpg',//缩略图
          Name: '第一张发票',
          States: 0, // 1.已验真，0 未验证，其他状态为异常

    ],

    :height： 控件高度，数字.默认400
    :showquerybutton   true/false,显示状态按钮
    @download="downLoad"  : @download调用下载方法，downLoad，自定义方法传入Id
     @querytrue:需要查验发票真伪时调方法。
 -->

  <div style="overflow:hidden;" :class="isFullScreen?'full-screen':''">
    <el-container>

      <!-- 图片显示 -->
      <el-main :style="{background: 'rgba(20,20,20,0.2)',}">

        <!-- <div class="img_box" :style="{transform:'rotateZ('+deg+'deg)',transform:'scale('+multiples+')',transformOrigin:'top left',height: (isFullScreen?'calc( 100vh - 160px )':(height - 160)+'px')}">
          <el-image
            id="image"
            v-drag
            :src="imgSrc"
            alt=""
            :style="{transform:'rotateZ('+deg+'deg)',}"
            :fit="fit"
          /></div> -->
        <div
          class="img_box"
          :style="{transform:'scale('+multiples+')',transformOrigin:'center center',}"
          @mousewheel.prevent="rollImg"
        >
          <!-- <div  class="image-slot" style="width:100%">
            <div class="text-center">
              <div class="iconfont  blue icon-ofddaoru" style="font-size:100px" />
              <div class="blue text-xxl padding-tb"> 暂不支持OFD格式发票的预览</div>
              <div class="text-normal">请下载原件后通过专用的<a class="text-sm blue" href="https://suwell-soft-package.oss-cn-beijing.aliyuncs.com/%E6%95%B0%E7%A7%91OFD%E7%89%88%E5%BC%8F%E9%98%85%E8%AF%BB%E8%BD%AF%E4%BB%B6.zip" target="_blank"><span class="text-bold text-normal "> ofd阅读器</span>(点击下载)</a>进行查看。</div>

            </div>
          </div> -->
          <div :style="{height: (isFullScreen?'calc( 100vh - 120px )':(height - 120)+'px'),}">
            <el-image
              id="image"
              v-drag="multiples"
              :src="imgSrc"
              alt=""
              :style="{transform:'rotateZ('+deg+'deg)',objectFit:fit,width:'100%',height:'100%',position:'absolute'}"
              :fit="fit"
            >
              <div slot="error" class="image-slot" style="width:100%">
                <div class="text-center">
                  <div class="iconfont  blue icon-shimodumeiyou" style="font-size:100px" />
                  <div class="blue text-xxl padding-tb"> 暂时无法预览这张发票</div>
                  <div class="text-normal">您可以点击下载发票原件进行查看。</div>

                </div>
              </div></el-image>
          </div>
        </div>
        <div class="flex-center" style="position:relative">
          <div class="func">

            <div class="flex-center flex-sub padding-lr-sm">
              <el-tooltip class="item" effect="dark" content="放大图片" placement="top-start">
                <el-button type="text" @click="magnify"><i class="el-icon-zoom-in a-icon-sm white" /></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="缩小图片" placement="top-start">
                <el-button type="text" @click="shrink"><i class="el-icon-zoom-out  a-icon-sm white" /></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="向右旋转" placement="top-start">
                <el-button type="text" @click="rotate"><i class="iconfont  icon-xuanzhuan01 a-icon-sm white" /></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="向左旋转" placement="top-start">
                <el-button type="text" @click="rotateleft"><i class="iconfont  icon-xuanzhuan02  a-icon-sm white" /></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="重新加载" placement="top-start">
                <el-button type="text" @click="refreshorign"><i class="el-icon-refresh a-icon-sm white" /></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="下载原件" placement="top-start">
                <el-button type="text" @click="download(piclist[curpic].ThumbSrc)"><i class="el-icon-download a-icon-sm white" /></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="真伪查验" placement="top-start">
                <div v-if="showquerybutton">
                  <el-button v-if=" piclist.length>0&&piclist[curpic].States==1" type="text" class="green margin-left-sm text-sm"><i class="iconfont icon-yanzheng1 a-icon-sm " /></el-button>
                  <el-button v-else-if=" piclist.length>0&&piclist[curpic].States==0" type="text" class="white margin-left-sm text-sm"><i class="iconfont icon-yanzhengma a-icon-sm  " /></el-button>
                  <el-button v-else type="text" class="red margin-left-sm text-sm"><i class="el-icon-error a-icon-sm " /></el-button>
                </div>
              </el-tooltip>
              <el-tooltip v-if="!isFullScreen" class="item" effect="dark" content="全屏" placement="top-start">
                <el-button type="text" class="margin-left-sm" @click="toggleFullScreen()"><i class="iconfont a-icon-sm icon-quanpingzuidahua white" /></el-button>
              </el-tooltip>
              <el-tooltip v-else class="item" effect="dark" content="取消全屏" placement="top-start">
                <el-button type="text" class="margin-left-sm" @click="toggleFullScreen()"><i class="iconfont a-icon-sm icon-tuichuquanping white" /></el-button>
              </el-tooltip>
            </div>
          </div>
          <div v-if="showquerybutton" style="top:10px;right:30px;position:absolute;">
            <span v-if=" piclist.length>0&&piclist[curpic].States==1" class="iconfont  icon-yanzhentongguo green" style="font-size:150px" />
            <span v-if=" piclist.length>0&&piclist[curpic].States> 1" class="iconfont   icon-yanzhenyichang red" style="font-size:150px" />
          </div>
        </div>
        <el-button
          v-if="isFullScreen"
          style="position: absolute;top: 5px;right: 5px;"
          type="text"
          class="margin-left-sm"
          @click="toggleFullScreen()"
        ><i class="iconfont a-icon-sm icon-tuichuquanping white" /></el-button>
      </el-main>
      <!-- 图片列表 -->
      <el-footer class="thumb-pic " style="height:80px">
        <div ref="thumblist" class="thumb-pic flex-between ">
          <el-button type="text" @click="PreviousPic()"><i class="el-icon-arrow-left white" /></el-button>
          <el-scrollbar class="flex-center">
            <div class="flex-center white text-sm">
              ({{ curpic + 1 }} / {{ piclist.length }})
              <span class="white text-sm" style="line-height: 20px;padding-right:20px">{{ piclist.length>0?piclist[curpic].Name:'' }}</span>

            </div>
            <ul class="pic-list" :style="curpic> scrollCount?'margin-left:-' + (curpic - scrollCount ) * 60 + 'px':''" @mousewheel.prevent="rollThumb">
              <li v-for=" (item,index) in piclist" :key="index" @click="selectedImage(index)">
                <el-image :src="item.Src" fit="fill" :style="curpic==index?'transition: 0.2s;border: 1px #409EFF solid;padding:2px;border-radius:3px;background:#409EFF':''">
                  <div slot="error" class="image-slot">
                    <el-image :src="require('@/assets/images/OFD.png')" fit="fill" style="margin-left: -3px;margin-top: -2px;transition: 0.2s;border: 1px #409EFF solid;padding:2px;border-radius:3px;background:#fff;" />
                  </div>
                </el-image>

              </li>
            </ul>
          </el-scrollbar>
          <el-button type="text" @click="nextPic()"><i class="el-icon-arrow-right white" /></el-button>
        </div>

      </el-footer>
    </el-container>
  </div>
</template>
<script>
import Vue from 'vue'

Vue.directive('drag',
  function(el, binding) {
    const oDiv = el // 当前元素
    const sc = binding.value
    oDiv.onmousedown = function(e) {
      e.preventDefault()
      const bw = document.body.clientWidth * sc
      const bh = document.body.clientHeight * sc
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - oDiv.offsetLeft
      const disY = e.clientY - oDiv.offsetTop
      // 计算两边坐标
      document.onmousemove = function(e) {
        let l = 0; let t = 0
        // 拖动边界
        if (e.clientX >= bw) {
          l = bw - disX
        } else if (e.clientX <= 0) {
          l = 0 - disX
        } else {
          l = e.clientX - disX
        }
        if (e.clientY >= bh) {
          t = bh - disY
        } else if (e.clientY <= 0) {
          t = 0 - disY
        } else {
          t = e.clientY - disY
        }
        // 移动当前元素

        oDiv.style.left = l + 'px'
        oDiv.style.top = t + 'px'
      }
      // 鼠标停止移动时，事件移除
      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
      document.onmouseout = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
)
export default {
  props: {
    piclist: {
      type: Array,
      default: function() {
        return [{ Src: '' }]
      }

    },
    height: {
      type: Number,
      default: 400
    },
    showquerybutton: {
      type: Boolean,
      default: true
    },
    feeDetailId: {
      type: String,
      default: '' }

  },

  data() {
    return {
      // 图片缩放用
      imgSrc: '',
      deg: 0,
      curpic: 0, // 当前选中的图片
      multiples: 1,
      fit: 'scale-down',
      scrollCount: '1',
      isFullScreen: false
    }
  },
  watch: {
    piclist: {
      deep: true,
      handler(val) {
        if (this.piclist.length > 0) { this.imgSrc = this.piclist[0].Src }
      }
    }
  },
  created() {
    this.imgSrc = this.piclist[0].Src
  },
  methods: {
    // 展示发票预览
    magnify() {
      if (this.multiples >= 3) {
        return
      }
      this.multiples += 0.25
    },
    // 缩小
    shrink() {
      if (this.multiples <= 1) {
        return
      }
      this.multiples -= 0.25
    },
    // 滚轮
    rollImg() {
      /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
      var temp = this.multiples
      var zoom
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
      zoom = event.wheelDelta / 1200
      /* 最小范围 和 最大范围 的图片缩放尺度 */
      temp += zoom
      if (temp >= 1.1 && temp <= 3.05) {
        this.multiples = temp
      } else if (temp < 1.1) {
        this.multiples = 1
      } else {
        this.multiples = 3
      }
      return false
    },
    // 旋转
    rotate() {
      this.deg += 90
      if (this.deg >= 360) {
        this.deg = 0
      }
    },
    // 逆时针旋转
    rotateleft() {
      this.deg -= 90
      if (this.deg <= -360) {
        this.deg = 0
      }
    },
    refreshorign() {
      this.deg = 0
      this.multiples = 1

      const img = document.getElementById('image')
      img.style.top = 0 + 'px'
      img.style.left = 0 + 'px'
    },
    selectedImage(index) {
      this.imgSrc = this.piclist[index].Src
      this.curpic = index
      this.deg = 0
      this.multiples = 1

      const img = document.getElementById('image')
      img.style.top = 0 + 'px'
      img.style.left = 0 + 'px'
      // 当前选中图片超出边界时，列表滚动并显示当前选中
      const sct = this.$refs.thumblist.clientWidth / 60 - 3
      this.scrollCount = sct > 0 ? sct : 0
      this.$emit('showdetail', this.piclist[index])
    },
    PreviousPic() {
      if (this.curpic >= 1) {
        this.curpic -= 1
        this.imgSrc = this.piclist[this.curpic].Src
        this.deg = 0
        this.multiples = 1

        const img = document.getElementById('image')
        img.style.top = 0 + 'px'
        img.style.left = 0 + 'px'
        // 当前选中图片超出边界时，列表滚动并显示当前选中
        const sct = this.$refs.thumblist.clientWidth / 60 - 3
        this.scrollCount = sct > 0 ? sct : 0
        this.$emit('showdetail', this.piclist[this.curpic])
      }
    },
    nextPic() {
      if (this.curpic < this.piclist.length - 1) {
        this.curpic += 1
        this.imgSrc = this.piclist[this.curpic].Src
        this.deg = 0
        this.multiples = 1

        const img = document.getElementById('image')
        img.style.left = 0 + 'px'
        // 当前选中图片超出边界时，列表滚动并显示当前选中
        const sct = this.$refs.thumblist.clientWidth / 60 - 3
        this.scrollCount = sct > 0 ? sct : 0
        this.$emit('showdetail', this.piclist[this.curpic])
      }
    },
    // 滚轮缩略图
    rollThumb() {
      var temp = this.curpic
      var zoom
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
      zoom = event.wheelDelta / 120
      /* 最小范围 和 最大范围 的图片缩放尺度 */
      temp -= zoom
      if (temp >= 0 && temp <= this.piclist.length - 1) {
        this.curpic = temp

        this.imgSrc = this.piclist[this.curpic].Src
        this.deg = 0
        this.multiples = 1

        const img = document.getElementById('image').parentElement
        img.style.top = 0 + 'px'
        img.style.left = 0 + 'px'
        // 当前选中图片超出边界时，列表滚动并显示当前选中
        const sct = this.$refs.thumblist.clientWidth / 60 - 3
        this.scrollCount = sct > 0 ? sct : 0
        this.$emit('showdetail', this.piclist[this.curpic])
      }
      return false
    },
    // 全屏
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen
    },
    // 下载方法
    download(thumbSrc) {
      this.$emit('download', thumbSrc)
    },
    querytrue(Id) {
      this.$emit('querytrue', Id)
    }

  }
}

</script>
<style lang="scss" scoped>
.el-scrollbar ::v-deep.el-scrollbar__wrap{

  overflow-y: hidden;
}
.thumb-pic{
  background-color:#777;
  width: 100%;
  overflow-x: hidden;
  .pic-list{
transition: 0.5s;
    overflow-x: hidden;
    display: flex;
    padding-left: 0;
    margin:5px auto;
    li{
      display: inline-block;

    }
  }
}
.thumb-pic .pic-list ::v-deep.el-image {
  height: 40px;
  width:40px;
  margin:0 10px;
  flex-basis: 40px;

}
.img_box{
  overflow: hidden;

  .el-image{
    height: auto;

    display: flex;
    align-items: center;
    width: 100%;
  }
}
i:hover{

  font-weight: bold;
}
.el-footer{
  line-height: unset;
  height: 100px;
  padding:0;
  button{
    min-width: 30px;
  }

}
.el-main{
  overflow: hidden;
  padding:10px 0;
}
.full-screen{
  position: fixed;
    top: 10px;
    left: 10px;
    transition: 0.5s;
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    border-radius: 5px;
    background: rgba(100,100,100,0.95);
    box-shadow: 0 0 10px #000;

    z-index: 9999;
}
.func{
position: absolute;
z-index: 2;
margin-top: -20px;
background: rgba(20,20,20,0.5);
border-radius: 5px;
}
</style>
